<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <!-- v-on 给 对应的元素绑定事件   click 事件类型   v-on:click='事件名字' -->
        <button v-on:click='handler1'> 第一种方式</button>
        <button v-on:click='handler2()'> 第二种方式 方便传递参数 </button>
        <button v-on:click='num++'> 第三种方式 简单函数可以直接执行函数后的结果 </button>
        <hr>
        <h1>{{num}}</h1>
        <hr>
        <!--  v-on 可以简写 成 @   -->
        <h1> 方法的简写 推荐使用简写 </h1>
        <button @click='handler1'> 第一种方式</button>
        <button @click='handler2()'> 第二种方式 方便传递参数 </button>
        <button @click='num++'> 第三种方式 简单函数可以直接执行函数后的结果 </button>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '绑定事件',
                num: 100
            },
            // 所有的事件都写在methods
            methods: {
                //    不 推荐
                // handler1:function() {
                //     alert('我被点击了')
                // }

                handler1() {
                    alert('我被点击了1  推荐使用这个方法')
                },

                handler2() {
                    alert('我被点击了2   推荐使用这个方法')


                }

            }
        });
    </script>
</body>

</html>